<template>
  <n-card class="cardbg">
    <div class="moe_menu">
      <template v-for="itemx in val.data.list">
        <template v-for="(item, key) in itemx.ms">
          <template v-if="item?.type != 'hide'">
            <template v-if="key == 0"
              ><div :id="`${itemx.name}`">
                <n-h3>{{ itemx.name }}</n-h3>
              </div></template
            >

            <div class="_box" :id="`${itemx.exname}_${item.name}`">
              <h3 align="center" class="_title">{{ item.name }}</h3>

              <div>
                <div class="_tag" v-if="item.type">
                  <pre style="padding-left: 4.8rem">[提示文本]<br/>{{ item.tips }}</pre>
                </div>
                <div class="_tag" v-if="item.type">
                  <pre
                    style="padding-left: 4.8rem"
                  >[触发指令]<template v-for="item2 in item.trigger"><br/> - {{ item2 }}</template></pre>
                </div>
                <div class="_tag" v-if="item.type">
                  <pre style="padding-left: 4.8rem">[使用方法]<br/>{{ item.mstips }}</pre>
                </div>
              </div>
            </div>
          </template>
        </template>
      </template>
    </div>
  </n-card>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";

export default {
  setup() {
    let ct = reactive({});
    let val = reactive({
      type: {
        guild: "公会类",
        hide: "隐藏显示类",
      },
      data: [],
      clidata: [],
    });

    ct.clickdata = (item) => {
      cfg.router.push({
        query: {
          ...cfg.route.query,
          bot_type: item.exname,
        },
      });
      val.clidata = item;
    };

    ct.get_plugin = async () => {
      let res;
      try {
        let baseurl = window.location.origin;

        //本地调试时自动转http
        if (baseurl == "http://192.168.31.200") {
          baseurl = "http://192.168.31.200:11456";
        } else {
          baseurl = `${baseurl}:11455`;
        }

        res = await cfg.axios.get(`${baseurl}/api`, {
          params: {
            action: "get_plugin",
          },
        });
      } catch (e) {
        console.error("Error:", e.message);
        return { code: -1, msg: e.message };
      }
      res = res.data;
      val.data = res.data;
      cfg.leftval = val.data;
    };

    cfg.navwidth = 160;
    cfg.navleft = true;
    cfg.leftcomp = defineAsyncComponent(() => import("./comp/left_nav.vue"));
    cfg.leftval = [];
    onBeforeUnmount(() => {
      cfg.navleft = false;
      cfg.leftcomp = null;
      cfg.leftval = null;
    });

    onMounted(async () => {
      await ct.get_plugin();
    });

    return {
      ct,
      val,
    };
  },
};
</script>
<style>
.moe_menu {
  display: flex;
  flex-direction: column;
}
.moe_menu ._div {
  margin-bottom: 10px;
}
.moe_menu ._title {
  margin-top: 5px;
  margin-bottom: 5px;
}
.moe_menu ._tag {
  margin-bottom: 8px;
}
.moe_menu ._left {
  padding-right: 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow: hidden;
}
._right {
  padding-left: 0.55rem;
  padding-right: 1rem;
  flex: 1;
}
</style>
